<template>
    <div class="upload-oss">
        <el-upload class="upload-demo" accept=".svg" :show-file-list="false" :http-request="upload">
            <el-button type="primary">上传</el-button>
        </el-upload>
        <el-progress v-if="flag" type="circle" :percentage="uploadPercentage" />
        <el-image :src="fileList" v-else>
            <template #error>
                <div class="image-slot">
                    <el-icon>
                        <Picture />
                    </el-icon>
                </div>
            </template>
        </el-image>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import tool from '@/utils/uploadTool'
import { Picture } from '@element-plus/icons-vue'

const emits = defineEmits(['close', 'submited', 'update:modelValue'])

const fileList = ref<any>()
const uploadPercentage = ref(0)
const flag = ref(true)

const upload = async (options: any) => {
    const res: any = await tool.oss.upload(options.file, (p: any) => {
        // console.log('progress:', p)
        uploadPercentage.value = p * 100
    })
    // console.log('upload:', res)
    fileList.value = res.res.requestUrls[0]
    emits('update:modelValue', res.res.requestUrls[0])
}

watch(() => uploadPercentage.value, (newValue) => {
    if (newValue === 100) {
        setTimeout(() => {
            flag.value = false
        }, 1000)
    }
})

</script>
<style scoped lang="scss">
.upload-oss {
    .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: var(--el-fill-color-light);
        color: var(--el-text-color-secondary);
        font-size: 20px;

        .el-icon {
            font-size: 20px;
        }
    }
}
</style>